<template>
  <el-card class="box-card">
    <div class="text item">
      <el-table
        v-loading="loading"
        :data="tableData"
        max-height="600"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="index"
          align="center"
          type="index"
          :index="indexMethod"
          label="序号"
          width="90"
        >
        </el-table-column>
        <el-table-column
          prop="order_id"
          align="center"
          label="订单号"
          width="180"
        >
        </el-table-column>
        <el-table-column prop="name" align="center" label="用户名">
        </el-table-column>
        <!-- <el-table-column prop="img" align="center" label="员工头像">
          <template slot-scope="scope">
            <el-image
              style="width: 50px; height: 50px"
              :src="scope.row.img"
              fit="cover"
            ></el-image>
          </template>
        </el-table-column> -->
        <el-table-column prop="ctime" align="center" label="评价时间">
        </el-table-column>
        <el-table-column prop="status" align="center" label="评价类型">
          <template slot-scope="scope">
            <span>{{ scope.row.status == 1 ? "好评" : "差评" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="content" align="center" label="评价内容">
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleEdit(scope.row)"
              >查看</el-button
            >
            <!-- <el-button type="danger" size="mini" @click="handleEdit(scope.row)"
              >删除</el-button
            > -->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[50, 100, 200, 300]"
        :page-size="50"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <el-button type="primary" class="backBtn" @click="handleBack"
        >返回</el-button
      >
    </div>
    <el-dialog
      class="dialog"
      title="反馈内容"
      :visible.sync="dialogVisible"
      width="45%"
      :before-close="handleClose"
      :model="formDetail"
    >
      <p>用户名：{{ formDetail.name }}</p>
      <p>评价类型：{{ formDetail.status == 1 ? "好评" : "差评" }}</p>
      <p>评价内容：</p>
      <div class="content">{{ formDetail.content }}</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">返 回</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import { opinions } from "../../../../utils/api";
import { getPingJiaDetail } from "../../../../utils/main";
export default {
  data() {
    return {
      loading: false,
      token: sessionStorage.getItem("token"),
      dialogVisible: false,
      formInline: {
        mobile: "",
        name: "",
      },
      formDetail: {
        name: "",
        status: "",
        content: "",
      },
      tableData: [],
      parameter: {
        common: "",
      },
      total: 0,
      limit: 50,
      page: 1,
      currentPage: 1,
      user_id: "",
      phone_number: "",
      time: "",
      value: "",
    };
  },
  methods: {
    //查询
    onSubmit() {
      this.getList();
    },
    //详情
    handleEdit(row) {
      // console.log(row);
      this.formDetail.name = row.name;
      this.formDetail.status = row.status;
      this.formDetail.content = row.content;
      // console.log(this.formDetail);
      this.dialogVisible = true;
    },
    // 返回
    handleBack() {
      this.$router.push(`/pingjia/guanli`);
    },
    //序号
    indexMethod(index) {
      if (this.total < this.limit) {
        return this.total - index;
      } else {
        return this.total - (this.page - 1) * this.limit - index;
      }
    },
    //关闭
    handleClose(done) {
      done();
    },
    //条数
    handleSizeChange(val) {
      this.limit = val;
      this.getList();
    },
    //页数
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },
    async getList() {
      this.loading = true;
      let res = await getPingJiaDetail(
        this.token,
        this.page,
        this.limit,
        this.user_id,
        this.phone_number,
        this.time
      );
      if (res.data.status) {
        this.tableData = res.data.data.data || [];
        this.total = res.data.data.count;
        // 时间转换
        this.tableData.forEach((item) => {
          var date = new Date(item.ctime * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
          var Y = date.getFullYear() + "-";
          var M =
            (date.getMonth() + 1 < 10
              ? "0" + (date.getMonth() + 1)
              : date.getMonth() + 1) + "-";
          var D = date.getDate() + " ";
          var h = date.getHours() + ":";
          var m = date.getMinutes() + ":";
          var s = date.getSeconds();
          item.ctime = Y + M + D + h + m + s;
        });

        // console.log(this.total, shouchu);
        let timer = setTimeout(() => {
          this.loading = false;
          clearTimeout(timer);
        }, 400);
      } else {
        if (res.data.msg == "token失效,请重新进行登录") {
          this.$router.push("/login");
        }
        if (res.data.msg == "此账号没有权限") {
          this.$message.error(res.data.msg);
          this.loading = false;
        }
        let timer = setTimeout(() => {
          this.$message.error(res.data.msg);
        }, 5000);
      }
    },
    getNowTime(e) {
      let date = new Date(e);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hour = date.getHours();
      let minute = date.getMinutes();
      month = month < 10 ? "0" + month : month;
      day = day < 10 ? "0" + day : day;
      hour = hour < 10 ? "0" + hour : hour;
      minute = minute < 10 ? "0" + minute : minute;
      return year + "-" + month + "-" + day + " " + hour + ":" + minute;
    },
  },
  mounted() {
    this.user_id = this.$route.query.id;
    // this.opinionsS();
    this.getList();
  },
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 100%;
}

.divFlex {
  display: flex;
  align-items: center;
}
.dialog p,
span {
  font-size: 18px;
  margin-bottom: 10px;
}
.dialog div {
  display: inline-block;
  height: 150px;
  border: 1px solid black;
  overflow: scroll;
  margin-top: 10px;
}
.content {
  width: 100%;
  height: 200px;
}
.backBtn {
  margin-top: 20px;
}
</style>